<template>
  <div class="ecology-detail">
    <Title
      v-slide-up
      :title="info.name"
      color="#000"
      size="36"
      bold="700"
      left="0"
      :line-height="60"
      class="mt100"
    />
    <van-swipe
      v-slide-plus
      :autoplay="3000"
      indicator-color="white"
      lazy-render
      class="ecology-detail-img"
    >
      <van-swipe-item v-slide-plus v-for="(img, k) in info.image" :key="k" class="f f-jc">
        <img :src="publicSrc(img)" style="max-height: 260px" />
      </van-swipe-item>
    </van-swipe>
    <div class="ecology-detail-content">{{ info.synopsis }}</div>
    <div v-slide-plus class="ecology-btn" @click="handleSeek">立即咨询</div>
    <Title
      v-slide-up
      title="产品参数"
      color="#000"
      size="14"
      bold="700"
      left="0"
      class="mt20"
    />
    <div v-slide-up class="ecology-detail-content">{{ info.parameter }}</div>
    <Title
      v-slide-up
      title="产品介绍"
      color="#000"
      size="14"
      bold="700"
      left="0"
      class="mt20"
    />
    <div v-slide-up v-html="info.introduce" class="ecology-detail-content" />
  </div>
</template>
<script setup lang="ts">
import { publicSrc } from "@/utils/common";
import { productDetail } from "@/api/ecology";
const router = useRouter();
const route = useRoute();

const ecologyId = ref<any>("");
const info = ref<any>({});

onMounted(() => {
  ecologyId.value = route.query.id;
  getInfo();
});

// 获取详情
const getInfo = () => {
  productDetail(ecologyId.value).then((res: any) => {
    if (res.code === 200) {
      let data = res.data;
      data.image = data.image ? data.image.split(",") : [];
      info.value = data;
    }
  });
};

// 咨询
const handleSeek = () => {
  router.push({
    path: "/m/contact",
    query: {
      title: encodeURIComponent(`生态产品：${info.value.name}`),
    },
  });
};
</script>
<style lang="scss" scoped>
.ecology-detail {
  padding: 1.25rem;
  border-bottom: 1px solid #e5e5e5;
  .ecology-detail-img {
    width: 100%;
    border: 1px solid #e5e5e5;
    margin-bottom: 1.25rem;
  }
  &-content {
    font-size: 0.875rem;
    line-height: 1.225rem;
    color: #383838;
  }
  .ecology-btn {
    width: 7.875rem;
    height: 2.9375rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4580dd;
    margin-top: 1.25rem;
    &:active {
      background-color: #4174c5;
    }
  }
}
</style>
